<!--
 * @Descripttion: 条码模板
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-11-03 14:00:43
 * @LastEditors: GW
 * @LastEditTime: 2022-01-06 10:19:58
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="big-main-wrapper warehouse-type-wrapper requisition-set-wrapper" style="margin:2px 8px;">
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">

                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="editDataFun(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="submitRequest">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="editDataFun(2)">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="remove">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="showModel=='order'">
                            <div class="btns" @click="changeView('list')">
                                <a-icon class="btns-icon" type="unordered-list" />
                                <div class="btns-text">列表</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="printPreview_1()">
                                <a-icon class="btns-icon" type="profile" />
                                <div class="btns-text">预览模板</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="table-wrapper-box" v-show="showModel=='list'">
                <a-table :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }" :columns="columns" :data-source="data" :pagination="false" bordered />
                <!-- <barcode value="5555523421524123123123123131231231231231" :width="1" :height="30" :fontSize="12">
                    Show this if the rendering fails.
                </barcode> -->
            </div>
            <div class="order-warpper-box" v-show="showModel=='order'">
                <section>
                    <div><span class="audit-status" style="z-index:78" v-show="voucherState==1">已审</span></div>
                    <a-form-model :layout="formLayout">
                        <div class="header-box">
                            <a-row class="template-barcode">
                                <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                    <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="模板编码" :rules="[{ required: true, message:'',trigger:'input'}]">
                                        <a-input v-model.trim="requestData.code"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                    <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="模板名称" :rules="[{ required: true, message:'',trigger:'input'}]">
                                        <a-input v-model.trim="requestData.name"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                    <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="适用对象">
                                        <a-select v-model="requestData.applicableObject" style="width:100%;">
                                            <a-select-option v-for=" (select,index) in businessObject" :key="index" :value="select.voucherTypeCode">
                                                {{select.voucherTypeName}}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                    <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="描　　述">
                                        <a-input v-model.trim="requestData.remark"></a-input>
                                    </a-form-model-item>
                                </a-col>

                                <a-col :span="12" class="text-center">
                                    <a-button type="primary" @click="myBlankDesign">设计模板</a-button>
                                </a-col>
                                <a-col :span="12" class="text-center">
                                    <a-button type="primary" @click="printPreview">预览模板</a-button>
                                </a-col>
                            </a-row>
                        </div>
                    </a-form-model>
                </section>
            </div>
        </div>
        <!--是否安装打印插件-->
        <barcodeUtil ref="printPlugIn"></barcodeUtil>
    </div>
</template>
<script>

import { mapState } from "vuex";
import editableCell from "./editTable/EditableCell";
import { getLodop } from "@/utils/tool/LodopFun"
import { saveTemplate, listTemplate, deleteTemplate, getVoucherDesign } from "@/api/inventory/barcode";
import barcodeUtil from './barcodeUtil';
var LODOP;
export default {
    components: {
        editableCell,
        barcodeUtil
    },
    data () {
        return {
            showModel: 'list',
            //----------↓样式----------
            fromStyle: { paddingTop: "8px" },
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            editFalse: {
                borderBottom: '1px solid #ded7d7'
            },
            grid: {
                xs: 24,
                sm: 24,
                md: 24,
                lg: 24,
                xl: 24,
                xxl: 24
            },
            //----------↑样式----------
            editMask: false,
            visible: false,
            isRouterAlive: true,
            data: [],
            thisClickId: null,
            customClick: (record, index) => {
                return {
                    on: {
                        contextmenu: (e) => {//右键事件
                            e.preventDefault();
                            if (index <= this.dataSource.length) {
                                this.openMenu(e);
                                console.log('右键点击的', index);
                                this.thisClickId = index;
                                // this.thisClickRecord = record;
                            }
                        },
                    }
                }
            },
            businessObject: [],
            businessObjectMap: new Map(),
            columns: [{
                title: '模板编码',
                dataIndex: 'code',
            },
            {
                title: '模板名称',
                dataIndex: 'name',
            },
            {
                title: '适用对象',
                dataIndex: 'applicableObject',
                customRender: (text, record, index) => {
                    // let back = '';
                    // if (this.businessObject.length > 0) {
                    //     this.businessObject.forEach(item => {
                    //         if (item.voucherTypeCode == text) {
                    //             back = item.voucherTypeName;
                    //         }
                    //     });
                    // }
                    // return back;
                    return this.businessObjectMap.get(text) || "";
                }
            },
            {
                title: '备注',
                dataIndex: 'remarks',
            },],

            pageSize: 20, // 每页多少条数据
            current: 1, // 当前页
            selectedKeys: [],
            selectedRows: [],

            requestData: {
                name: null,
                code: null,
                applicableObject: null,
                content: '',//模板代码
                remarks: null,
            },
        }
    },
    created () {
        this.getData();
        this.getVoucherDesign();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        printPreview_1 () {
            if (this.$refs.printPlugIn.CheckIsInstall()) {
                //是否下载打印插件
                return;
            }
            if (this.selectedRows.length != 1) {
                    this.$message.warning('请选择一条数据修改');
                    return;
                }
            this.requestData = this.selectedRows[0];
            //打印预览
            let that = this;
            LODOP = getLodop();

            // LODOP.SET_SHOW_MODE("HIDE_PAPER_BOARD", 2);
            // LODOP.SET_PREVIEW_WINDOW(0, 3, 0, 1200, 800, "");

            LODOP.SET_PRINT_PAGESIZE(1, 500, 508, "");
            eval(that.requestData.content);
            LODOP.PREVIEW();
        },
        myBlankDesign () {
            if (this.$refs.printPlugIn.CheckIsInstall()) {
                //是否下载打印插件
                return;
            }
            //打印设计
            let that = this;
            this.CreateOneFormPage();
            if (LODOP.CVERSION) CLODOP.On_Return = function (TaskID, Value) { that.requestData.content = Value; };
            that.requestData.content = LODOP.PRINT_DESIGN();
        },
        printPreview () {
            if (this.$refs.printPlugIn.CheckIsInstall()) {
                //是否下载打印插件
                return;
            }
            //打印预览
            let that = this;
            LODOP = getLodop();

            // LODOP.SET_SHOW_MODE("HIDE_PAPER_BOARD", 2);
            // LODOP.SET_PREVIEW_WINDOW(0, 3, 0, 1200, 800, "");

            LODOP.SET_PRINT_PAGESIZE(1, 500, 508, "");
            eval(that.requestData.content);
            LODOP.PREVIEW();
        },
        CreateOneFormPage () {
            LODOP = getLodop();

            // LODOP.PRINT_INIT("");
            // LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE",1);
            // LODOP.ADD_PRINT_TABLE(13,-2,"100.28mm","70.38mm","<table  border=\"1\"  cellpadding=\"10\" style=\"font-family:幼圆;font-weight:bold;text-align:center;margin:0 auto;font-weight:bold;color:#000;border:1px solid #000;border-collapse: collapse;\">\r\n                    <tr>\r\n                        <td style=\"width:35px\"></td>\r\n                        <td style=\"width:220px\" colspan=\"2\">重庆新西亚铝业(集团)股份有限公司</td>\r\n                        <td style=\"width:35px\"></td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td style=\"width:35px\">单号</td>\r\n                        <td></td>\r\n                        <td style=\"width:35px\">批次</td>\r\n                        <td></td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td>项目</td>\r\n                        <td></td>\r\n                        <td>数量</td>\r\n                        <td></td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td>编号</td>\r\n                        <td></td>\r\n                        <td rowspan=\"3\" colspan=\"2\"></td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td>颜色</td>\r\n                        <td></td>\r\n                    </tr>\r\n                    <tr>\r\n                        <td>序号</td>\r\n                        <td></td>\r\n                    </tr>\r\n                </table>");
            // LODOP.ADD_PRINT_TEXT(79,78,160,27,"面积计算表单号");
            // LODOP.SET_PRINT_STYLEA(0,"FontName","幼圆");
            // LODOP.SET_PRINT_STYLEA(0,"FontSize",12);
            // LODOP.SET_PRINT_STYLEA(0,"Bold",1);
            // LODOP.ADD_PRINT_TEXT(118,78,159,27,"项目工程");
            // LODOP.SET_PRINT_STYLEA(0,"FontName","幼圆");
            // LODOP.SET_PRINT_STYLEA(0,"FontSize",12);
            // LODOP.SET_PRINT_STYLEA(0,"Bold",1);
            // LODOP.ADD_PRINT_TEXT(159,78,161,27,"产品编号");
            // LODOP.SET_PRINT_STYLEA(0,"FontName","幼圆");
            // LODOP.SET_PRINT_STYLEA(0,"FontSize",12);
            // LODOP.SET_PRINT_STYLEA(0,"Bold",1);
            // LODOP.ADD_PRINT_TEXT(79,308,58,30,"批");
            // LODOP.SET_PRINT_STYLEA(0,"FontName","幼圆");
            // LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
            // LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
            // LODOP.SET_PRINT_STYLEA(0,"Bold",1);
            // LODOP.ADD_PRINT_BARCODE(154,263,129,113,"QRCode","二维码");
            // LODOP.SET_PRINT_STYLEA(0,"QRCodeErrorLevel","H");
            // LODOP.ADD_PRINT_TEXT(195,78,161,27,"产品颜色");
            // LODOP.SET_PRINT_STYLEA(0,"FontName","幼圆");
            // LODOP.SET_PRINT_STYLEA(0,"FontSize",12);
            // LODOP.SET_PRINT_STYLEA(0,"Bold",1);
            // LODOP.ADD_PRINT_TEXT(234,78,162,27,"序号");
            // LODOP.SET_PRINT_STYLEA(0,"FontName","幼圆");
            // LODOP.SET_PRINT_STYLEA(0,"FontSize",12);
            // LODOP.SET_PRINT_STYLEA(0,"Bold",1);
            // LODOP.ADD_PRINT_TEXT(118,308,57,29,"数");
            // LODOP.SET_PRINT_STYLEA(0,"FontName","幼圆");
            // LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
            // LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
            // LODOP.SET_PRINT_STYLEA(0,"Bold",1);
            // LODOP.ADD_PRINT_BARCODE(16,308,70,64,"QRCode","二维码");
            // LODOP.ADD_PRINT_BARCODE(16,14,70,64,"QRCode","二维码");
            eval(this.requestData.content);
        },
        changeView (view) {
            this.showModel = view;
        },
        //获取业务对象
        getVoucherDesign () {
            getVoucherDesign().then(res => {
                if (res.code === 200) {
                    let newMap = new Map();
                    res.data.forEach(e => {
                        newMap.set(e.voucherTypeCode,e.voucherTypeName);
                        e.key = e.id;
                    });
                    this.businessObjectMap = newMap;
                    this.businessObject = res.data;

                }
            })
        },
        onSelectChange (keys, rows) {
            this.selectedKeys = keys;
            this.selectedRows = rows;
        },
        editDataFun (type) {
            //新增 or 修改
            if (type == 1) {
                this.requestData = {
                    name: null,
                    code: null,
                    applicableObject: null,
                    content: '',//模板代码
                    remarks: null,
                }
                this.showModel = 'order';
            } else {
                if (this.selectedRows.length != 1) {
                    this.$message.warning('请选择一条数据修改');
                    return;
                }
                this.requestData = this.selectedRows[0];
                this.showModel = 'order';
            }
        },
        getData () {
            const { pageSize, current } = this;
            let params = { size: pageSize, current: current };
            listTemplate(params).then(res => {
                if (res.code == 200) {
                    if (JSON.stringify(res.data) != '[]') {
                        if (res.data.length > 0) {
                            this.data = res.data.map(r => {
                                return { ...r, key: r.id }
                            })
                        }
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        remove () {
            if (this.selectedKeys.length != 1) {
                this.$message.warning("请选择一条数据");
                return;
            }
            let that = this;
            this.$confirm({
                title: `是否确认删除 ${that.selectedRows[0].name}`,
                content: "",
                onOk () {
                    deleteTemplate({ id: that.selectedRows[0].id }).then(res => {
                        if (res.code == 200) {
                            that.selectedKeys = [];
                            that.$message.success("删除成功");
                            that.getData();
                        } else {
                            that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        submitRequest () {
            if (this.requestData.code == null) {
                this.$message.warning('请输入编码');
                return;
            }
            if (this.requestData.code.length != 2) {
                this.$message.warning('请输入两位数编码');
                return;
            }
            if (this.requestData.name == null) {
                this.$message.warning('请输入名称');
                return;
            }
            // if (this.requestData.type == null) {
            //     this.$message.warning('请选择类型');
            //     return;
            // }
            this.requestData.createDate = null;
            this.requestData.updateDate = null;

            saveTemplate(this.requestData).then(res => {
                if (res.code == 200) {
                    this.selectedKeys = [];
                    this.selectedRows = [];
                    this.$message.success("保存成功");
                    this.showModel = 'list';
                    this.getData();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
    },
};
</script>
<style lang="less">
    // @import '~@/style/setting/inventory.less';
    @import '~@/style/purchase/voucher.less';
    .table-wrapper-box {
        height: calc(100% - 45px);
        padding: 10px;
        overflow-y: auto;
    }
    .order-warpper-box {
        overflow-y: auto;
        padding: 10px;
    }
    .barcode-box {
        .ant-form-item {
            margin-bottom: 0px;
        }
    }
    .template-barcode {
        width: 500px;
        margin: 0 auto;
        padding-top: 20px;
    }
</style>